<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/toolbar/toolbar.js" charset="utf-8"></script>


<div id="toolbarDemo" >
  	<div title='API'>
		  <h2>$.fn.ccayToolbar(ops)</h2>				
		  <h3>作用：通过选择器初始化生成toolbar</h3>	
		  <form id="param" class="init ccay-form">
			<div class="ccay-form-body ccay-form-custom">
				<ul>						
				    <li class="ccay-form-row">
				        <samp><h3>ops参数</h3></samp>
						<span class="ccay-form-input">
							<h3>描述</h3>
						</span>
					</li>
							
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="toolbarItem"></samp>							    
						<span class="ccay-form-input">
							{String}<p>包住项的div的html，可选
							<p>默认值："&lt;div class='toolbar-item ${itemCSS}' >&lt;/div>"
							<p>可自定义</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="hasItemDiv"></samp>							    
						<span class="ccay-form-input">
							{Boolean}<p>是否生成指定的toolbarItem的html ， 可选
							<p>默认值：true
							<p>可自行设置为 false 则toolbar按顺序拼接，无toolbarItem</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="css"></samp>							    
						<span class="ccay-form-input">
							{String}<p>toolbar的样式class ， 可选
							<p>默认值："ccay-toolbar"</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="height"></samp>							    
						<span class="ccay-form-input">
							{String}<p>toolbar的高度，可选
							<p>默认值：自适应高度
							<p>可自定义，如：height：“300px”</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="width"></samp>							    
						<span class="ccay-form-input">
							{String}<p>toolbar的宽度 ， 可选
							<p>默认值：100%宽度
							<p>可自定义，如：width：“300px”</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="items{Array}"></samp>
					    <span class="ccay-form-input">
							 	<table class="ccay-table">
								 	<tr>
								 		<th>menuButton类型</th>
								 		<td>
								 		生成一个menuButton组件
								 		<p>type:"menuButton"，指定type
								 		<p>permission: {String} 指定权限
								 		<p>id: {String} 指定项的id 
								 		<p>defaultText: {String} 指定button显示名称 
								 		<p>defaultEvent: {String}/{Function} 指定button事件
								 		<p>menus:{Array}按钮菜单项，具体的参数，请参考menubutton的api
								 		</td>
								 	</tr>
								 	<tr>
								 		<th>img类型</th>
								 		<td>
								 		生成一个图标
								 		<p>type:"img"，指定type
									 	<p>permission: {String} 绑定权限
									 	<p>icon: {String} 指定按钮的图标类型
									 	<p>click: {Function} 指定事件
									 	<p>css: {String} 自定义ccay-icon的class
								 		</td>
								 	</tr>
								 	<tr>
								 		<th>imgButton类型</th>
								 		<td>
								 		生成一个带图标的按钮
								 		<p>type:"imgBtn"，指定type
									 	<p>permission: {String} 绑定权限
									 	<p>icon: {String} 指定按钮的图标类型
									 	<p>click: {Function} 指定事件
									 	<p>css: {String} 自定义class
									 	<p>text: {String} 指定按钮的显示名称，可指定i18nKey，系统自动国际化
									 	<p>attr: {Object} 自定义其他属性
								 		</td>
								 	</tr>
								 	<tr>
								 		<th>input类型</th>
								 		<td>
								 		生成一个普通的按钮
								 		<p>type:"input"，指定type
									 	<p>permission: {String} 绑定权限
									 	<p>icon: {String} 指定按钮的图标类型
									 	<p>click: {Function} 指定事件
									 	<p>css: {String} 自定义class
									 	<p>text: {String} 指定按钮的显示名称，可指定i18nKey，系统自动国际化
									 	<p>attr: {Object} 自定义其他属性
								 		</td>
								 	</tr>
								 	<tr>
								 		<th>link类型</th>
								 		<td>
								 		生成一个链接按钮
								 		<p>type:"link"，指定type
									 	<p>permission: {String} 绑定权限
									 	<p>click: {Function} 指定事件
									 	<p>css: {String} 自定义的class
									 	<p>text: {String} 指定按钮的显示名称，可指定i18nKey，系统自动国际化
									 	<p>attr: {Object} 自定义其他属性
								 		</td>
								 	</tr>
								 	<tr>
								 		<th>自定义html类型</th>
								 		<td>
								 		生成自定义的html
								 		<p>type:"html"，指定type
									 	<p>permission: {String} 绑定权限
									 	<p>htmlContent:	{String} 指定自定义的html字符串
								 		</td>
								 	</tr>
							 	</table>
					    </span></li>
				    </ul>
			   </div>
		  </form>
应用实例详见<a onclick="Ccay.example.ui.toolbar.gotoDemo()"><u>Demo</u></a>
			    
   	</div>	
	<div title='Toolbar' tabid="tab2">
		  <div>
			<div id="ccayToolbar"></div>
			<h3>html code:</h3>
			<div class="codeArea">
<pre id="html1">
&lt;div id="ccayToolbar1" >&lt;/div>
</pre>
			</div>
			<h3>js code:</h3>
            <div class="codeArea">
				<pre id="js1">
$("#ccayToolbar1").ccayToolbar({
	// <font color='red'>width，height设置toolbar的高宽，可选，默认width为100%</font>
	// width:"150px", 
	// height:"200px",
	// <font color='red'>自定义toolbar样式,可选，默认ccay-toolbar</font>
	// css:"ccay-toolbarCss-Test", 
	items:[
		{
			type:"input", // 默认button样式
			text:"ccay.common.button.gridAdd",
			permission:"studentManagement:create",
			id:"btnAdd",
			attr:{
				//id : "btnAdd" // 此处设置也可
			}
		},
		{
			type:"menuButton",
			id:"menubtn", // menuButton 直接使用id设置，其他使用  attr: 'id = "ccaybutton"'进行传递id
		    defaultText : "ccay.common.button.importExport", // 指定菜单名
			menus : [ 
			  {
				itemCSS:"custom-item", // 自定义项的class
				icon : "import", // 指定系统图片的名称，可在“按钮”demo中查询，也可指定之际的类名，自定义图片样式
				permission:"studentManagement:import",
				text : "ccay.common.button.import",
				click : "alert(1)"
			 }, 
			  {
				icon : "export", // 指定系统图片的名称，可在“按钮”demo中查询，也可指定之际的类名，自定义图片样式
				permission:"studentManagement:export",
				text : "ccay.common.button.export",
				click : "alert(2)"
			 }, 
			  {
				icon : "download", // 指定系统图片的名称，可在“按钮”demo中查询，也可指定之际的类名，自定义图片样式
				permission:"studentManagement:import",
				text : "ccay.common.label.importTemplate",
				click : "alert(3)"
			 }
			 ]
		},
		{
			type:"menuButton",
			id:"menubtn2", // menuButton 直接使用id设置，其他使用  attr: 'id = "ccaybutton"'进行传递id
		    defaultText : "ccay.common.button.delete", // 指定菜单名
			menus : [ 
			  {
			  	id : "btnDel",
				icon : "del", // 指定系统图片的名称，可在“按钮”demo中查询，也可指定之际的类名，自定义图片样式
				permission:"studentManagement:delete",
				text : "ccay.common.button.gridDelete"
			 }, 
			  {
			  	id : "btnUndoDel",
				icon : "no-del", // 指定系统图片的名称，可在“按钮”demo中查询，也可指定之际的类名，自定义图片样式
				permission:"studentManagement:delete",
				text : "ccay.common.button.gridUndoDelete"
			 }    					 
			 ]
		},
		{
	    	type:"input", // 默认button样式
	    	text:"ccay.common.button.gridSave",
	    	css:"init hasPermission", // class
	    	permission:"studentManagement:create|studentManagement:update|studentManagement:delete",
	    	attr:{
	    		id : "btnSave"
	    	}
	    }
	]
});
				</pre>
			</div>
			<div class='try'>
				<a onclick="Ccay.example.openTry('#toolbarDemo',$('#js1').html(),$('#html1').html())">亲自试一试</a>
			</div>
		  </div>
	   </div>
	<div title="试一试" tabid="trytab" >
		    <fieldset class='ccay-demo'>
		    <legend ><h2>代码区</h2></legend>
			   
			   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 
	
					<div>
					    <table  style="width:100%;">
					      <tr>
					        <td style="width:100%;">
							<h3>js Code:</h3>	
							  <!-- 高度按需来调整。默认最小应为100px -->					
		                      <textarea id="jsTxt" style="height:250px;width:99%;"></textarea>
		                    </td>   
		                  </tr>
		                  <tr>
		                    <td style="width:100%;">
							<h3>html Code:</h3>
							  <!-- 高度按需来调整。默认最小应为100px -->
		                      <textarea id="htmlTxt" style="height:50px;width:99%;"></textarea>
		                    </td>
		                  </tr> 
	                    </table>
					</div>
	           </fieldset>
	        <fieldset class='ccay-demo'>
	          <legend ><h2>结果区</h2></legend>
				<div>
					<div id="demoMainPanel"></div>
				</div>
	        </fieldset>
	</div>

	<div title="FAQ">
	  <form class="init ccay-form">
		<div class="ccay-form-body ccay-form-custom">
		    <ul>                     
		        <li class="ccay-form-row">
		            <samp><h3>问题</h3></samp>
		           <span class="ccay-form-input">
		               <h3>解决方案</h3>
		           </span>
		        </li>
		        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
		        <li class="ccay-form-row">
		                          <samp class="i18n" i18nKey=""></samp>                          
		                         <span class="ccay-form-input"></span>
		        </li>  
		    </ul>
		</div>
	  </form>                    
	</div>  
</div>


